<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="工程案例" height="46" title-color="#333" :title-bold="true"
		 :title-size="36">
			<view class="navbar-right" slot="right" @click="Store">
				确认
			</view>
		</u-navbar>
		<view class="textarea_box">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="150" :label-position="labelPosition" label="工程名称" prop="gcalmc" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入工程名称" v-model="form.gcalmc" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="担任角色" prop="gcaljs" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入担任角色" v-model="form.gcaljs" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="建筑形式" prop="gcalxs" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入建筑形式" v-model="form.gcalxs" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="建筑规模" prop="gcalgm" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入建筑规模" v-model="form.gcalgm" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="工程图片" prop="name" class="name-box"
				 :label-style="labelStyle">
					<u-upload width="125" height="160" max-count="1" :action="action" ref="uUpload" :show-progress="false"
					 :preview-full-image="false" :show-upload-list="showUploadList" v-if="showUploadList" :custom-btn="true">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" style="width: 125rpx; height: 160rpx; overflow: hidden;">
							<image :src="fileList.url" mode="scaleToFill" style="height: 100%;width: 100%;"></image>
						</view>
					</u-upload>
					<u-upload width="125" height="160" max-count="1" :action="action" ref="uUpload" v-if="!showUploadList"
					 :show-progress="false" :preview-full-image="false" :show-upload-list="!showUploadList">
					</u-upload>
				</u-form-item>
			</u-form>
			<view class="" style="text-align: center;margin-top: 30rpx;padding: 0 100rpx;" v-if="mkscdtn">
				<u-button type="success"  shape="circle" @click="mkdelete">删除</u-button>
			</view>
			<u-toast ref="uToast"/>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				id: "",
				index: "",
				showUploadList: false,
				mkscdtn:false,
				form: {
					gcalmc: '',
					gcaljs: '',
					gcalxs: '',
					gcalgm: '',
					gcaltp: '',
				},
				action: 'http://www.artisanchn.com/ajax/app.ashx',
				fileList: [{
					url: "",
				}],
				// lists: [],
				gcalData: [],
				// geclcd: "",
				rules: {

				},
				errorType: ['message'],
				labelPosition: "top",
				labelStyle: {
					height: "36rpx",
					fontSize: "24rpx",
					color: "#666666",
				},
			}
		},
		// onReady() {
		// 	this.lists = this.$refs.uUpload.lists;
		// },
		onLoad(options) {
			this.id = options.id
			if (options.index) {
				this.index = options.index
			}
			this.resumemy(options.id)
			console.log(options)
		},
		methods: {
			 async mkdelete(){
				this.gcalData.splice(this.index,1)
				this.gcalData = JSON.stringify(this.gcalData)
				let $t=this
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myupdate',
					para: {
				    "gcal":this.gcalData,
						"id": this.id
					}
				}
				const res = await this.$u.api.resumexgdata(params)
				if(res.ResponseID==0){
					this.$refs.uToast.show({
						title: res.Message,
						icon:false,
						duration:800,
						callback(){
							uni.$emit('refreshData');
							uni.navigateBack({
								delta: 1
							})
						}
					})
					
				}
			},
			async resumemy(id) {
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myquery',
					para: {
						"id": id,
					}
				}
				const res = await this.$u.api.resumedata(params)
				if(res.Data.gcal){
					this.gcalData = JSON.parse(res.Data.gcal)
				}
				if (this.index) {
					this.mkscdtn=true
					this.form.gcalgm = this.gcalData[this.index].gcalgm
					this.form.gcaljs = this.gcalData[this.index].gcaljs
					this.form.gcalmc = this.gcalData[this.index].gcalmc
					this.form.gcalxs = this.gcalData[this.index].gcalxs
					this.form.gcaltp = this.gcalData[this.index].gcaltp
					if (this.form.gcaltp) {
						this.showUploadList = true
						if (this.form.gcaltp.indexOf('http') == -1) {
							this.fileList.url = this.baseUrl + this.form.gcaltp
						} else {
							this.fileList.url = this.form.gcaltp
						}
					}
					// var lis = document.querySelector('.u-preview-image div')
					// lis.setAttribute('style', 'background-image: url(' + this.fileList.url +
					// 	'); background-position: center center; background-size: cover; background-repeat: no-repeat;');
				} else {
				
					this.index = this.gcalData.length
					this.gcalData[this.index] = { ...this.form
					}
				}
				console.log(this.fileList)
			},
			async Store() {
				let $t=this
				this.$refs.uUpload.upload();
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				this.gcalData[this.index].gcaltp = files != "" ? files[0].url : ""
				this.gcalData = JSON.stringify(this.gcalData)
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myupdate',
					para: {
						"gcal": this.gcalData,
						"id": this.id
					}
				}
				const res = await this.$u.api.resumexgdata(params)
				if(res.ResponseID==0){
					this.$refs.uToast.show({
						title: res.Message,
						icon:false,
						duration:800,
						callback(){
						uni.$emit('refreshData');
						uni.navigateBack({
							delta: 1
						})
						}
					})
					
				}
			}
		},
		watch: {
			form: {
				handler(newName, oldName) {
					this.gcalData[this.index] = { ...this.form
					}
				},
				immediate: false,
				deep: true,
			}

		},
	}
</script>

<style scoped lang="scss">
	.name-box {
		padding: 30rpx;
	}

	.navbar-right {
		margin-right: 30rpx;
		font-size: 30rpx;
	}
</style>
